<template>
  <div>
    <van-nav-bar title="我的跟帖" left-arrow @click-left="onClickLeft" />
    <div class="myfollow" v-for="item in userCommentList" :key="item.id">
      <p>
        {{item.create_date.split('T')[0]}}
        <span>{{item.create_date.split('T')[1].split('.')[0]}}</span>
      </p>
      <div class="reply" v-if="item.parent">
        <!-- 回复 -->
        <p>
          回复：
          <span>{{item.parent.user.nickname}}</span>
        </p>
        <div>{{item.parent.content}}</div>
      </div>
      <!-- 评论 -->
      <div class="comment">{{item.content}}</div>
      <!-- 原文 -->
      <div class="original" >
        <p class="title">原文：{{item.post.title}}</p>
        <van-icon name="arrow" />
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data(){
    return{
      userCommentList:[]
    }
  },
  created() {
    this.getUserComment()
  },
  methods: {

    async getUserComment(){
      const {data:res} = await this.$http.get('/user_comments')
      console.log(res)
      this.userCommentList = res.data
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  },

}
</script>
<style lang="less" scoped>
.myfollow {
  line-height: 8.333vw;
  font-size: 3.889vw;
  padding: 2.778vw 5.556vw;
  border-bottom: 0.278vw solid #eee;
  overflow: hidden;
  p {
    color: #999;
    font-size: 3.333vw;
  }
  p.title {
    width: 77.778vw;
    // 一行文本   省略号
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .original {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .van-icon {
      color: #ccc;
      font-size: 4.444vw;
    }
  }
}
// 回复
.reply {
  background: rgba(228,228,228,.3);
  height: 16.667vw;
  line-height: 6.944vw;
  margin-bottom: 2.778vw;
  padding: 1.389vw 2.778vw;
  box-sizing: border-box;
  div {
    color:#999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
// 更多
.more{
  font-size: 3.889vw;
  color:#999;
  display: flex;
  align-items: center;
  justify-content: center;
  height:22.222vw;
  i{
    font-size: 3.333vw;
  }
}
</style>